import React, { Component } from "react";
import { Button, DatePicker, Icon, Selecta, Input, message, Tooltip } from 'antd'
import moment from 'moment';
import $ from 'jquery'
import RtmpVideoPlay from './RtmpVideoPlay'
import { inject, observer } from 'mobx-react';
import { toJS } from 'mobx'
import UploadPeople from './UploadPeople'
import ChooseAttr from './ChooseAttr'
import { TreeSelects } from './TreeSelects'
import { TimeSelect } from './TimeSelect'
import { Search } from './Search'
import { BounceWord } from './BounceWord'
import { CSSTransition, TransitionGroup } from 'react-transition-group'
import './style.css'
const { SHOW_PARENT } = TreeSelects;
const videoJsOptions = {
    autoplay: true, //自动播放
    language: "zh-CN",
    // controls: true, //控制条
    preload: "auto", //自动加载
    errorDisplay: true, //错误展示
    // width: 472, //宽
    // height: 472, //高
    // fluid: true,  //跟随外层容器变化大小，跟随的是外层宽度
    // controlBar: false,  // 设为false不渲染控制条DOM元素，只设置controls为false虽然不展示，但还是存在
    // textTrackDisplay: false,  // 不渲染字幕相关DOM
    userActions: {
        hotkeys: true //是否支持热键
    },
    sources: [
        {

            // src: 'rtmp://202.69.69.180:443/webcast/bshdlive-pc',
            // src: 'rtmp://192.168.1.102:1935/video/34020000001310002232',
            src: 'rtmp://192.168.1.102:1935/video/34020000001320001234',
            type: "rtmp/flv" //类型可加可不加，目前未看到影响
        }
    ]
};
const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
@inject('AdminStore')
@inject('YunYingStore')
@observer
export default class Left_part extends Component {

    state = {
        reloadVideo: true,
    }
    componentDidMount = async () => {
        setInterval(() => {
            this.setState((prevState) => ({
                reloadVideo: false
            }), () => {
                this.setState((prevState) => ({
                    reloadVideo: true
                }))
            })
        }, 2000)
    }
    render() {
        return (
            <React.Fragment>
                <div className="rtmpVideo">{this.props.YunYingStore.visible &&
                    this.state.reloadVideo &&
                    <RtmpVideoPlay {...videoJsOptions} type='first' />}
                </div>

                <TreeSelects />
                <BounceWord />
                <TimeSelect />
                {
                    this.props.YunYingStore.UploadShow && <TransitionGroup>
                        <CSSTransition
                            timeout={1000}
                            classNames='fade'
                            unmountOnExit
                            onEntered={(el) => { el.style.color = 'blue' }}
                            appear={true}
                        >
                            <div id="UploadPeople">
                                <UploadPeople />
                            </div>
                        </CSSTransition>
                    </TransitionGroup>
                }
                {
                    this.props.YunYingStore.ChooseAttrShow && <TransitionGroup>
                        <CSSTransition
                            timeout={1000}
                            classNames='fade'
                            unmountOnExit
                            onEntered={(el) => { el.style.color = 'blue' }}
                            appear={true}
                        >
                            <div id="ChooseAttr">
                                <ChooseAttr />
                            </div>
                        </CSSTransition>
                    </TransitionGroup>
                }
                {
                    this.props.YunYingStore.SearchShow && <TransitionGroup>
                        <CSSTransition
                            timeout={1000}
                            classNames='fade'
                            unmountOnExit
                            onEntered={(el) => { el.style.color = 'blue' }}
                            appear={true}
                        >
                            <div id="Search">
                                <Search />
                            </div>
                        </CSSTransition>
                    </TransitionGroup>
                }

                <div className="biggerVideo rtmpVideo">
                    {!this.props.YunYingStore.visible && this.state.reloadVideo &&
                        <RtmpVideoPlay {...videoJsOptions} type='second' />}
                </div>
            </React.Fragment >
        );
    }

    componentDidMount = async () => {
        await this.props.YunYingStore.getDeviceList()
    }


}
